<template>
  <div class="lx-article__comment-box">
    <div class="lx-article__comment-head flex">
      <i class="iconfont icon-liuyan comment-icon"></i>
      <span class="comment-label">留言</span>
    </div>
    <textarea
      v-model="commentText"
      placeholder="写点什么"
      class="comment-area"
      maxlength="500"
    ></textarea>
    <!-- 按钮 -->
    <div class="flex flex--e">
      <button class="comment-btn" @click="handleComment">提交</button>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useComment } from "../hooks/useComment";
const emit = defineEmits(["comment"]);
const { commentText, onComment } = useComment();
const handleComment = async () => {
  const res = await onComment("-1");
  if (res) emit("comment");
};
</script>
<style lang="scss" scoped>
.lx-article__comment-head {
  color: orange;
  padding: 10px 0;
  .comment-icon {
    font-size: 24px;
    font-weight: bold;
    margin-right: 5px;
  }
  .comment-label {
    font-size: 18px;
  }
}
.comment-area {
  border: 1px solid #ddd;
  width: 100%;
  font-size: 14px;
  padding: 15px;
  min-height: 180px;
  resize: none;
  outline: none;
  border-radius: 4px;
  background-image: url("http://img.xjlyh.site/2023/09/10/0aa182d26ad342eabf8d3a505453fe9d.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100%;
  margin-bottom: 10px;
}
.left-btn {
  font-size: 18px;
  .emoji-icon {
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
  }
}
.comment-btn {
  height: 32px;
  width: 70px;
  background: rgb(131, 123, 199);
  border-radius: 5px;
  text-align: center;
  color: #fff;
  border: none;
  line-height: 32px;
  cursor: pointer;
}
</style>
